<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <!-- 左侧内容保持不变 -->
        <el-card class="announcement-card">
          <div slot="header" class="clearfix">
            <h1 class="announcement-title">公告：</h1>
          </div>
          <div class="announcement-content">
            <p>
              1.志愿第一批填报已经开启，欢迎同学们进入系统填报。
            </p>
            <p>
              2.填报过程中有什么不理解，请联系老师。
            </p>
            <div class="body">
              <p>
                <i class="el-icon-user-solid"></i>
                QQ：xxx
              </p>
              <p class="wechat">
                <i class="el-icon-user-solid"></i>
                微信：xxx
              </p>
            </div>
          </div>
        </el-card>

        <!-- 在这里插入 ECharts 代码 -->
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <h1 class="announcement-title">2024年考研热门专业:</h1>
          </div>
          <div ref="chart" style="height: 350px;"></div>
        </el-card>

        <p></p>
      </el-col>

      <el-col :sm="24" :lg="12">
        <!-- 右侧内容：南丁格尔图 -->
        <el-card class="pie-chart-card">
          <div slot="header" class="clearfix">
            <h1 class="announcement-title">2024录取比列最多的专业:</h1>
          </div>
          <div ref="pieChart" style="height: 500px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.2",
      // 走马灯
      imageBox: [
        { id: 0, idView: require('../assets/images/box/framework.png') },
        { id: 1, idView: require('../assets/images/box/books.png') },
        { id: 2, idView: require('../assets/images/box/study.png') }
      ]
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);

      // 指定图表的配置项和数据
      const option = {
        title: {
          left: 'center', // 标题居中
          top: '0px' // 设置标题距离顶部的距离
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          name: '专业排名',
          type: 'category',
          data: [
            '计算机科学与技术', '金融学', '法学', '工商管理', '会计学',
            '心理学', '教育学', '英语', '新闻传播学', '历史学'
          ],
          axisLabel: {
            interval: 0,
            margin: 10, // 缩短 X 轴标签与底边框的距离
            formatter: function (value) {
              // 将超过一定长度的字符串在第二行显示
              if (value.length > 4) {
                return value.slice(0, 4) + '\n' + value.slice(4);
              }
              return value;
            }
          },
          axisLine: {
            lineStyle: {
              color: '#000', // 底边框颜色
              width: 1, // 底边框宽度
            }
          }
        },
        yAxis: {
          name: '报考人数',
          type: 'value'
        },
        series: [
          {
            name: '考研专业',
            type: 'bar',
            data: [
              5000, 4500, 4000, 3500, 3000, 2500, 2000, 1500, 1000, 500
            ],
            itemStyle: {
              color: '#ADD8E6' // 设置柱状图颜色为淡蓝色
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initPieChart() {
      // 基于准备好的dom，初始化echarts实例
      const pieChart = echarts.init(this.$refs.pieChart);

      // 指定图表的配置项和数据
      const pieOption = {
        title: {
          text: '录取人数最多的五个专业',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '录取人数',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#ffff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
             data: [
              { value: 2800, name: '计算机科学与技术', itemStyle: { color: '#EE8286' } }, // 红色
              { value: 2400, name: '金融学', itemStyle: { color: '#87CEFF' } }, // 蓝色
              { value: 2200, name: '法学', itemStyle: { color: '#99FF99' } }, // 绿色
              { value: 2000, name: '工商管理', itemStyle: { color: '#FFFF66' } }, // 黄色
              { value: 1800, name: '会计学', itemStyle: { color: '#DDA0DD' } } // 紫色
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      pieChart.setOption(pieOption);
    }
  },
  mounted() {
    this.initChart();
    this.initPieChart();
  }
};
</script>
<style scoped lang="scss">
.home {
  /* 现有样式 */
}

/* 调整公告标题的高度 */
.announcement-title {
  font-size: 20px; /* 原始字体大小的一半 */
  margin-top: 0; /* 去掉顶部外边距 */
  margin-bottom: 0; /* 去掉底部外边距 */
}

/* 增加公告卡片和图表卡片之间的间距 */
.announcement-card {
  margin-bottom: 20px; /* 增加底部间距 */
  height: 220px; /* 设置公告卡片的高度 */
}

/* 调整公告内容的间距 */
.announcement-content {
  margin-top: 1px; /* 缩短公告标题和内容之间的间距 */
}

.chart-card {
  margin-top: 20px; /* 增加上方间距 */
}

.pie-chart-card {
  margin-top: 20px; /* 增加上方间距 */
}
</style>
